<template>
	<view class="u-rela">
		<image class="header-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img7.png" mode="widthFix"></image>
		<!-- 自定义头部start -->
		<customHeader title="生产企业"></customHeader>
		<!-- 自定义头部end -->
		<view class="wrap">
			<view class="u-font-34 blod">企业信息</view>
			<view class="u-flex u-row-center status-wrap">
				<image class="aut-icon-1 u-m-r-10"
					src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/aut-icon-1.png"
					mode="widthFix">
				</image>
				<text>可追溯</text>
			</view>
			<view class="u-font-34 blod u-m-t-30">{{data.company.name}}</view>
			<view class="u-m-t-60 zizhi-wrap">
				<div class="item" @click="producersHandler">
					<image class="aut-icon-1 u-m-r-10" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace//icon-qy-1.png" mode="widthFix">
					</image>
					<text class="name">出品商</text>
					<view class="u-flex u-row-center status-wrap">
						<image class="aut-icon-1 u-m-r-10"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/aut-icon-1.png"
							mode="widthFix">
						</image>
						<text>已核验</text>
					</view>
				</div>
				<div class="item" @click="manufacturersHandler">
					<image class="aut-icon-1 u-m-r-10" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-qy-2.png" mode="widthFix">
					</image>
					<text class="name">生产商</text>
					<view class="u-flex u-row-center status-wrap">
						<image class="aut-icon-1 u-m-r-10"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/aut-icon-1.png"
							mode="widthFix">
						</image>
						<text>已核验</text>
					</view>
				</div>
				<div class="item" @click="productionLicenseHandler">
					<image class="aut-icon-1 u-m-r-10" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-qy-3.png" mode="widthFix">
					</image>
					<text class="name">生产许可</text>
					<view class="u-flex u-row-center status-wrap">
						<image class="aut-icon-1 u-m-r-10"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/aut-icon-1.png"
							mode="widthFix">
						</image>
						<text>已核验</text>
					</view>
				</div>
				<div class="item" @click="phoneHandler">
					<image class="aut-icon-1 u-m-r-10" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-qy-4.png" mode="widthFix">
					</image>
					<text class="name">客服电话</text>
					<view class="u-flex u-row-center status-wrap">
						<image class="aut-icon-1 u-m-r-10"
							src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/aut-icon-1.png"
							mode="widthFix">
						</image>
						<text>已核验</text>
					</view>
				</div>
			</view>
			<view class="desc u-m-t-50">
				{{data.company.introduce}}
			</view>
			<view class="u-m-t-80 u-font-34 blod">权威监管</view>
			<view class="u-m-t-20 u-m-b-50">
				{{data.supervise.introduce}}
			</view>
			
			<view class="uSwiper">
				<u-swiper :list="data.supervise.banner_list" height='447'></u-swiper>
			</view>
			</image>
			<div class="rz-wrap u-m-t-60 u-flex u-row-between"  v-for="(item,index) in data.supervise.certificate_list" :key="index">
				<view class="left">
					<text class="label">检测机构</text>
					<text class="name">{{item.institution}}</text>
					<text class="label">证书编号</text>
					<text class="name">{{item.code}}</text>
					<text class="label">签发日期</text>
					<text class="name">{{item.send_date}}</text>
				</view>
				<!-- <image class="img10 u-m-r-10" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img11.png" mode="widthFix"></image> -->
				<image :src="item.image" mode=""></image>
			</div>

		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#07C160" v-model="current" :list="list" :mid-button="false" @change="tabbarChange">
		</u-tabbar>
		
		<u-popup v-model="show" mode="center" width="500rpx">
			<image v-if="popImage" class="popImage" style="width: 100%;height: 100%;" :src="popImage" mode="widthFix"></image>
			<view v-if="popPhone" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 38rpx;font-weight: bold;color: #333333;">
				客服电话: {{popPhone}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				current: 3,
				list: [{
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1a.png',
						text: '产品信息',
						customIcon: false,
						url: '/pages/agricTrace/agricInfo/agricInfo'
					},
					{
						text: '生长环境',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2a.png',
						customIcon: false,
						url: '/pages/agricTrace/growEnv/growEnv'
					},
					{
						text: '生长日记',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3a.png',
						customIcon: false,
						url: '/pages/agricTrace/growDiary/growDiary'
					},
					{
						text: '权威监管',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4a.png',
						customIcon: false,
						url: '/pages/agricTrace/authority/authority'
					}
				],
				code:'',
				data:{
					
				},
				show:false,
				popImage:'',
				popPhone:''
			}
		},
		onLoad() {
			if(this.$store.state.code){
				this.code = this.$store.state.code;
				console.log(this.code,'权威监管');
			}
			
			this.trace_getSupervise(this.code)
		},
		methods: {
			tabbarChange(index) {
				console.log(index)
				uni.navigateTo({
					url: this.list[index].url
				})
			},
			
			// 获取监管管理页面数据
			trace_getSupervise(code){
				this.$http_1({
					url:this.api_1.trace_getSupervise,
					method: 'get',
					data:{
						code:code
					}
				}).then(res => {
					// console.log(res,'监管管理');
					if(res.code == 1){
						this.data = res.data
					}
				})
			},
			
			// 出品商
			producersHandler(){
				this.show = true;
				this.popImage = this.data.company.producers;
				this.popPhone = ''
			},
			
			// 生产商
			manufacturersHandler(){
				this.show = true;
				this.popImage = this.data.company.manufacturers;
				this.popPhone = ''
			},
			
			// 生产许可
			productionLicenseHandler(){
				this.show = true;
				this.popImage = this.data.company.productionLicense;
				this.popPhone = ''
			},
			
			// 客服电话
			phoneHandler(){
				this.show = true;
				this.popImage = '';
				this.popPhone = this.data.company.phone
			}
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
	}


	.wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		margin-top: -50rpx;
		position: relative;
		z-index:2;
	}

	.aut-icon-1 {
		width: 22rpx;
		height: 22rpx;
	}

	.status-wrap {
		width: 120rpx;
		height: 40rpx;
		background: #E2F8EC;
		border-radius: 5rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #07C160;
		margin-top: 20rpx;
	}

	.zizhi-wrap {
		display: flex;
		justify-content: space-between;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>image {
				width: 80rpx;
				height: 80rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 20rpx;
			}
		}
	}
	
	.uSwiper{
		width: 670rpx;
		height: 447rpx;
	}

	.img10 {
		width: 670rpx;
		height: 447rpx;
	}
	.rz-wrap{
		
		image{
			width: 247rpx;
			height: 350rpx;
		}
		.left{
			display: flex;
			flex-direction: column;
		}
		
		.label{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}
		.name{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 40rpx;
		}
	}
</style>
<style>
	page {
		padding: 0;
		background: #fff;
	}
</style>
